<!DOCTYPE html>
<html>
<head>
	<title>文件处理</title>
</head>
<body>
	<input type="file" name="文件处理11" id="test-image-file"/>
</body>
	<script type="text/javascript">
		var oFile = document.getElementById('test-image-file');
		//监听change事件
		oFile.addEventListener('change',function(){
			//1,检查文件是否存在
			if (!oFile.value) {
				alert('没有选择文件');
				return;
			}

			//2,获取文件的属性
			var file = oFile.files[0];//因为可以多文件上传,故此处获取第一个
			console.log("文件名是:"+file.name);
			console.log("文件大小:"+file.size);
			console.log("文件最后修改时间:"+file.lastModifiedDate);

			//3,检查文件后缀
			 if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
			 	alert('不是有效的图片文件!');//此处获取文件名根据文件后缀判断也可以
		        return;
			 }

			 //4,读取文件(图片预览等效果)
			 var reader = new FileReader();
			 reader.onload = function(e){
			 	var data = e.target.result;//base64编码
			 	console.log(data);
			 }
			 //以DataURL的形式读取文件
			 reader.readAsDataURL(file);
		})
	</script>
</html>